<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小红书AI客服</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            /* 白色+红色配色方案 */
            --primary-color: #FF2442;      /* 小红书品牌红色 */
            --primary-light: #FFE8EB;      /* 淡红色背景 */
            --primary-gradient: linear-gradient(135deg, #FF4E50 0%, #FF2442 100%);
            --secondary-color: #FF8A98;    /* 浅红色 - 次要元素 */
            --text-dark: #333333;          /* 主要文字颜色 */
            --text-medium: #666666;        /* 次要文字颜色 */
            --text-light: #999999;         /* 辅助文字颜色 */
            --bg-color: #FFFFFF;           /* 背景颜色 */
            --bg-secondary: #FAFAFA;       /* 次要背景颜色 */
            --card-bg: #FFFFFF;            /* 卡片背景 */
            --card-border: #F0F0F0;        /* 卡片边框 */
            --input-bg: #F8F8F8;           /* 输入框背景 */
            --input-border: #EEEEEE;       /* 输入框边框 */
            --input-focus-border: rgba(255, 36, 66, 0.5);
            --input-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            --input-focus-shadow: 0 0 0 3px rgba(255, 36, 66, 0.15);
            --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
            --shadow-medium: 0 8px 20px rgba(0, 0, 0, 0.12);
            --border-radius: 14px;
            --border-radius-lg: 18px;
            --border-radius-sm: 10px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        @keyframes gentleFadeIn {
            from { opacity: 0; transform: translateY(15px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes softPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.02); }
            100% { transform: scale(1); }
        }

        @keyframes cursorBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        @keyframes floatAnimation {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }

        @keyframes glowEffect {
            0%, 100% { box-shadow: 0 10px 25px rgba(255, 36, 66, 0.15); }
            50% { box-shadow: 0 10px 30px rgba(255, 36, 66, 0.25); }
        }

        /* 明亮的白色背景 */
        body {
            font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background-color: var(--bg-color);
            background-image: 
                radial-gradient(circle at 10% 10%, #FAFAFA 0%, transparent 60%),
                radial-gradient(circle at 90% 90%, #F6F6F6 0%, transparent 60%);
            color: var(--text-dark);
            padding: 20px;
            min-height: 100vh;
            line-height: 1.6;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow-x: hidden;
        }

        /* 现代白色容器 */
        .container {
            width: 100%;
            max-width: 950px;
            margin: 0 auto;
            background-color: var(--card-bg);
            border-radius: var(--border-radius-lg);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08),
                        0 0 0 1px rgba(0, 0, 0, 0.02);
            padding: 30px 30px 20px;
            position: relative;
            overflow: hidden;
            animation: gentleFadeIn 0.8s ease-out;
            z-index: 1;
        }

        /* 新设计的应用头部样式 */
        .app-header {
            position: relative;
            padding: 30px 30px 40px;
            margin-bottom: 40px;
            border-bottom: 1px solid var(--card-border);
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            background: linear-gradient(180deg, var(--primary-light) 0%, rgba(255, 255, 255, 0) 100%);
            border-radius: var(--border-radius) var(--border-radius) 0 0;
            overflow: hidden;
        }

        /* 头部背景装饰 */
        .header-bg-decoration {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            opacity: 0.08;
            background-image:
                radial-gradient(circle at 20% 30%, var(--primary-color) 0%, transparent 8%),
                radial-gradient(circle at 80% 70%, var(--primary-color) 0%, transparent 10%);
            pointer-events: none;
        }

        /* 完全重构的logo设计 - 去除所有不必要元素 */
        .app-logo {
            width: 90px;
            height: 90px;
            min-width: 90px;
            margin-right: 25px;
            position: relative;
            animation: floatAnimation 6s ease-in-out infinite;
            z-index: 1;
            background: transparent; 
            box-shadow: none;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 纯净的对话框形状 */
        .logo-bubble {
            position: relative;
            width: 85px;
            height: 70px;
            background: var(--primary-gradient);
            border-radius: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 20px rgba(255, 36, 66, 0.25);
        }
        
        /* 简化的对话框三角形 */
        .logo-bubble:after {
            content: "";
            position: absolute;
            bottom: -15px;
            left: 15px;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 5px solid transparent;
            border-top: 20px solid #FF2442;
            transform: rotate(10deg);
        }
        
        /* AI文字样式 */
        .app-logo-text {
            font-size: 38px;
            font-weight: 800;
            color: #fff;
            letter-spacing: -2px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
            font-family: 'Arial', sans-serif;
            display: flex;
        }
        
        /* A 字母特殊样式 */
        .logo-letter-a {
            position: relative;
            transform: skewX(-10deg);
            margin-right: 2px;
        }
        
        /* I 字母特殊样式 - 没有伪元素 */
        .logo-letter-i {
            position: relative;
            transform: skewX(-10deg);
        }

        /* 新设计的标题容器 */
        .app-title-container {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            z-index: 1;
        }

        .app-title {
            font-size: 28px;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 8px;
            display: inline-block;
            position: relative;
        }

        .app-title::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -4px;
            width: 40px;
            height: 3px;
            background: var(--primary-color);
            border-radius: 3px;
        }

        .app-subtitle {
            font-size: 15px;
            color: var(--text-medium);
            font-weight: 400;
            line-height: 1.5;
            display: flex;
            align-items: center;
        }

        .app-subtitle::before {
            content: "●";
            color: var(--primary-color);
            font-size: 8px;
            margin-right: 8px;
            opacity: 0.8;
        }

        /* 头部右侧装饰 */
        .header-decoration-right {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 120px;
            height: 50px;
            background-image: url("data:image/svg+xml,%3Csvg width='120' height='50' viewBox='0 0 120 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13,25 L27,25 M40,15 L60,15 M40,25 L50,25 M40,35 L55,35 M70,15 L100,15 M70,25 L90,25 M70,35 L85,35' stroke='%23FF2442' stroke-width='2' stroke-linecap='round' opacity='0.2'/%3E%3C/svg%3E");
            z-index: 1;
            opacity: 0.6;
        }

        /* 头部装饰元素 */
        .header-decoration {
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg,
                transparent 0%,
                var(--primary-color) 30%,
                var(--primary-color) 70%,
                transparent 100%);
            opacity: 0.3;
        }

        /* 内容布局 */
        .content-layout {
            display: flex;
            gap: 25px;
            margin-bottom: 30px;
        }

        .content-left, .content-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        /* 卡片样式 */
        .card {
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            padding: 30px;
            position: relative;
            transition: all 0.3s ease;
            border: 1px solid var(--card-border);
            overflow: hidden;
            box-shadow: var(--shadow-soft);
        }

        .card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--primary-gradient);
            opacity: 0.9;
        }

        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
        }

        .card-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-dark);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .card-title svg {
            width: 20px;
            height: 20px;
            fill: var(--primary-color);
        }

        /* 表单元素 */
        .form-group {
            margin-bottom: 25px;
            position: relative;
        }

        .form-label {
            display: block;
            margin-bottom: 12px;
            font-size: 15px;
            color: var(--text-medium);
            font-weight: 500;
        }

        .form-input {
            width: 100%;
            padding: 16px 18px;
            background-color: var(--input-bg);
            border: 1px solid var(--input-border);
            border-radius: var(--border-radius-sm);
            color: var(--text-dark);
            font-size: 15px;
            transition: all 0.25s ease;
            box-shadow: var(--input-shadow);
        }

        .form-input:focus {
            outline: none;
            border-color: var(--input-focus-border);
            box-shadow: var(--input-focus-shadow);
        }

        .form-input::placeholder {
            color: var(--text-light);
        }

        /* 按钮样式 */
        .btn-group {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
            margin-top: 30px;
        }

        .btn-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .btn {
            padding: 16px 0;
            border: none;
            border-radius: var(--border-radius);
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .btn-primary {
            background: var(--primary-gradient);
            color: #FFFFFF;
            box-shadow: 0 4px 12px rgba(255, 36, 66, 0.2);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(255, 36, 66, 0.3);
            filter: brightness(1.05);
        }

        .btn-secondary {
            background-color: var(--primary-light);
            color: var(--primary-color);
            border: 1px solid rgba(255, 36, 66, 0.2);
        }

        .btn-tertiary {
            background-color: var(--bg-secondary);
            color: var(--text-medium);
            border: 1px solid var(--input-border);
        }

        .btn:hover {
            transform: translateY(-2px);
        }

        /* 终端风格输出容器 */
        .output-container {
            margin-top: 30px;
            position: relative;
            background: var(--input-bg);
            border-radius: var(--border-radius);
            padding: 35px 20px 20px;
            min-height: 150px;
            color: var(--primary-color);
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
            font-size: 14px;
            line-height: 1.6;
            overflow: hidden;
            border: 1px solid var(--input-border);
            box-shadow: var(--shadow-soft);
        }

        .output-container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 30px;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--input-border);
            border-radius: var(--border-radius) var(--border-radius) 0 0;
        }

        .output-container::after {
            content: "";
            display: inline-block;
            width: 8px;
            height: 18px;
            background: var(--primary-color);
            position: absolute;
            bottom: 20px;
            right: 20px;
            animation: cursorBlink 1s infinite;
        }

        .output-container:empty::after {
            content: none;
        }

        .output-label {
            position: absolute;
            top: 7px;
            left: 15px;
            font-size: 12px;
            color: var(--primary-color);
            font-weight: 500;
            z-index: 1;
        }

        .output-controls {
            position: absolute;
            top: 8px;
            right: 15px;
            display: flex;
            gap: 6px;
            z-index: 1;
        }

        .output-control {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .output-control:nth-child(1) {
            background-color: #FF5F56;
        }

        .output-control:nth-child(2) {
            background-color: #FFBD2E;
        }

        .output-control:nth-child(3) {
            background-color: #27C93F;
        }

        /* 页脚 */
        .footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 35px;
            padding-top: 18px;
            border-top: 1px solid var(--card-border);
            font-size: 12px;
            color: var(--text-light);
            position: relative;
        }

        .footer-text {
            display: flex;
            align-items: center;
        }

        .footer-text span {
            margin: 0 5px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .content-layout {
                flex-direction: column;
            }

            .container {
                padding: 20px;
            }

            .app-header {
                flex-direction: column;
                align-items: center;
                text-align: center;
                padding: 25px 15px;
            }

            .app-logo {
                margin-right: 0;
                margin-bottom: 20px;
            }

            .app-title-container {
                align-items: center;
            }

            .app-title::after {
                left: 50%;
                transform: translateX(-50%);
            }

            .header-decoration-right {
                display: none;
            }
        }

        @media (max-width: 480px) {
            body {
                padding: 10px;
            }

            .btn-row {
                grid-template-columns: 1fr;
            }

            .app-logo {
                width: 80px;
                height: 80px;
                min-width: 80px;
            }

            .app-logo-text {
                font-size: 34px;
            }

            .footer {
                flex-direction: column;
                gap: 10px;
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="app-header">
            <div class="header-bg-decoration"></div>
            <!-- 完全重构的Logo结构 -->
            <div class="app-logo">
                <div class="logo-bubble">
                    <div class="app-logo-text">
                        <span class="logo-letter-a">A</span>
                        <span class="logo-letter-i">I</span>
                    </div>
                    <!-- 移除了高光div -->
                </div>
            </div>
            <div class="app-title-container">
                <h1 class="app-title">小红薯智能客服系统</h1>
                <p class="app-subtitle">AI驱动的小红书渠道客户服务解决方案</p>
            </div>
            <div class="header-decoration-right"></div>
            <div class="header-decoration"></div>
        </div>

        <div class="content-layout">
            <div class="content-left">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">
                            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                            </svg>
                            连接配置
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="input_access_token">API 访问令牌</label>
                        <input type="text" id="input_access_token" class="form-input" placeholder="输入您的授权密钥，连接云端服务">
                    </div>

                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="form-label" for="input_workflow_id">数据查询工作流 ID</label>
                        <input type="text" id="input_workflow_id" class="form-input" placeholder="数据查询工作流标识">
                    </div>
                </div>
            </div>

            <div class="content-right">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">
                            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3z"/>
                            </svg>
                            数据流配置
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="input_app_token">配置表链接</label>
                        <input type="text" id="input_app_token" class="form-input" placeholder="飞书多维表中配置表的链接">
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="input_Scheme_Name">方案名称</label>
                        <input type="text" id="input_Scheme_Name" class="form-input" placeholder="执行方案的名称">
                    </div>

                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="form-label" for="input_number">编号</label>
                        <input type="text" id="input_number" class="form-input" placeholder="请输入编号">
                    </div>
                </div>

                <div class="btn-group">
                    <button class="btn btn-primary" onclick="submit()">
                        立即启动系统
                    </button>
                    <div class="btn-row">
                        <button class="btn btn-secondary" onclick="saveConfig()">
                            保存配置
                        </button>
                        <button class="btn btn-tertiary" onclick="clearForm()">
                            重置表单
                        </button>
                    </div>
                    <button class="btn btn-tertiary" onclick="wclose()">
                        关闭窗口
                    </button>
                </div>
            </div>
        </div>

        <!-- 输出容器 -->
        <div class="output-container" id="output">
            <div class="output-label">xiaohongshu@ai:~$</div>
            <div class="output-controls">
                <div class="output-control"></div>
                <div class="output-control"></div>
                <div class="output-control"></div>
            </div>
        </div>

        <!-- 页脚 -->
        <div class="footer">
            <div class="footer-text">
                © 2025 小红书AI客服系统 <span>•</span> 版本 1.0.2
            </div>
            <div class="footer-text">
                <span>AI驱动</span> <span>•</span> <span>安全可靠</span> <span>•</span> <span>高效智能</span>
            </div>
        </div>
    </div>

    <!-- 事件脚本保持不变 -->
    <script type="text/javascript">
    // 窗口加载完成
    window.onload = function(){
        console.log("窗口加载完成")

        // 调用Python的airscript.call方法，传递true作为参数
        window.airscript.call('Web_page_status', "true");
    }

    // 执行提交按钮和获取用户输入函数
    function submit(){
        console.log("用户点击了提交");

        //获取用户输入框的内容
        var access_token = document.getElementById("input_access_token").value;
        var workflow_id = document.getElementById("input_workflow_id").value;
        var app_token = document.getElementById("input_app_token").value;
        var Scheme_Name = document.getElementById("input_Scheme_Name").value;
        var number = document.getElementById("input_number").value;

        // 向 Python 传递数据
        var data = {
            "access_token": access_token,
            "workflow_id": workflow_id,
            "app_token": app_token,
            "Scheme_Name": Scheme_Name,
            "number": number
        }
        // 将data对象转换为JSON字符串
        var dataString = JSON.stringify(data);
        // 调用Python的airscript.call方法，传递dataString作为参数
        window.airscript.call('data', dataString);

        airscript.close()                                              //AS特定方法快捷关闭窗口
    }

    // 保存配置函数
    function saveConfig() {
        console.log("用户点击了保存配置");

        // 获取所有输入数据（与submit函数相同）
        var access_token = document.getElementById("input_access_token").value;
        var workflow_id = document.getElementById("input_workflow_id").value;
        var app_token = document.getElementById("input_app_token").value;
        var Scheme_Name = document.getElementById("input_Scheme_Name").value;
        var number = document.getElementById("input_number").value;

        var data = {
            "access_token": access_token,
            "workflow_id": workflow_id,
            "app_token": app_token,
            "Scheme_Name": Scheme_Name,
            "number": number
        }

        // 将data对象转换为JSON字符串
        var dataString = JSON.stringify(data);
        // 调用Python的保存方法
        window.airscript.call('save_config', dataString);
    }

    // 清空表单函数
    function clearForm() {
        console.log("用户点击了清空");

        // 清空输入框
        document.getElementById("input_access_token").value = "";
        document.getElementById("input_workflow_id").value = "";
        document.getElementById("input_app_token").value = "";
        document.getElementById("input_Scheme_Name").value = "";
        document.getElementById("input_number").value = "";

        // 通知Python端表单已清空
        window.airscript.call('clear_form', "true");
    }

    // 加载配置函数
    function loadConfig(configData) {
        if (!configData) return;

        try {
            // 解析JSON配置数据
            var config = JSON.parse(configData);

            // 填充输入框
            if (config.access_token) {
                document.getElementById("input_access_token").value = config.access_token;
            }
            if (config.workflow_id) {
                document.getElementById("input_workflow_id").value = config.workflow_id;
            }
            if (config.app_token) {
                document.getElementById("input_app_token").value = config.app_token;
            }
            if (config.Scheme_Name) {
                document.getElementById("input_Scheme_Name").value = config.Scheme_Name;
            }
            if (config.number) {
                document.getElementById("input_number").value = config.number;
            }

            console.log("配置加载成功");
        } catch (e) {
            console.error("加载配置出错:", e);
        }
    }

    // 关闭窗口函数
    function wclose(){
        console.log("用户点击了关闭")                                   //用log输出信息
        airscript.close()                                              //AS特定方法快捷关闭窗口
    }

    // 后端回传信息（用于显示欢迎语）
    function General_parameters(str){
        console.log("后端回传了:"+str)                                   //用log输出信息
        document.getElementById("output").innerHTML = str;
    }

    // 加载配置回调函数
    function load_config_callback(configStr) {
        console.log("加载到配置:", configStr);
        loadConfig(configStr);
    }

    // 添加保存路径回调函数
    function save_path_callback(pathInfo) {
        console.log("配置已保存至:", pathInfo);
        document.getElementById("output").innerHTML = "配置已保存至: " + pathInfo;
    }
    </script>
</body>
</html>